<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head th:fragment="header">
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="Site keywords here">
    <meta name="description" content="">
    <meta name='copyright' content=''>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Title -->
    <title>Home</title>

    <!-- Favicon -->
    <link rel="icon" th:href="@{/img/yyyh/favicon.png}">

    <!-- Google Fonts -->
    <link rel="stylesheet" th:href="@{/css/yyyh/css.css}">
    <!-- Bootstrap CSS -->


    <!-- Nice Select CSS -->
    <link rel="stylesheet" th:href="@{/css/yyyh/nice-select.css}">
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" th:href="@{/css/yyyh/font-awesome.min.css}">
    <!-- icofont CSS -->
    <link rel="stylesheet" th:href="@{/css/yyyh/icofont.css}">
    <!-- Slicknav -->
    <link rel="stylesheet" th:href="@{/css/yyyh/slicknav.min.css}">
    <!-- Owl Carousel CSS -->
    <link rel="stylesheet" th:href="@{/css/yyyh/owl-carousel.css}">
    <!-- Datepicker CSS -->
    <link rel="stylesheet" th:href="@{/css/yyyh/datepicker.css}">
    <!-- Animate CSS -->
    <link rel="stylesheet" th:href="@{/css/yyyh/animate.min.css}">
    <!-- Magnific Popup CSS -->
    <link rel="stylesheet" th:href="@{/css/yyyh/magnific-popup.css}">

    <!-- Medipro CSS -->
    <link rel="stylesheet" th:href="@{/css/yyyh/normalize.css}">
    <link rel="stylesheet" th:href="@{/css/yyyh/style.css}">
    <link rel="stylesheet" th:href="@{/css/yyyh/responsive.css}">

    <!-- Color CSS -->
    <link rel="stylesheet" th:href="@{/css/yyyh/color/color1.css}">
    <link rel="stylesheet" href="#" id="colors">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">

    <style>
        .header .logo {
            float: left;
            margin-top: 0px;
        }
        a {
             color: black;
        }
        .pagination-detail{
            display: none;
        }
    </style>


</head>


<body>
<!-- Preloader -->
<div class="preloader">
    <div class="loader">
        <div class="loader-outter"></div>
        <div class="loader-inner"></div>

        <div class="indicator">
            <svg width="16px" height="12px">
                <polyline id="back" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline>
                <polyline id="front" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline>
            </svg>
        </div>
    </div>
</div>
<!-- End Preloader -->

<!-- Header Area -->
<header th:replace="/yyyh/include :: bodyHeader"></header>
<!-- End Header Area -->

<div class="container" style="height: 531px;">
    <input type="hidden" id="pid" th:value="${userId}">
    <table id="exampleTable" data-mobile-responsive="true">
    </table>
</div>


<div th:replace="/yyyh/include :: bodyFooter"></div>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/plugins/layer/layer.js"></script>
<script>

    var prefix = "/yygl/record"
    $(function () {
        load();
    });

    function load() {
        $('#exampleTable')
            .bootstrapTable(
                {
                    method: 'get', // 服务器数据的请求方式 get or post
                    url: prefix + "/list", // 服务器数据的加载地址
                    iconSize: 'outline',
                    toolbar: '#exampleToolbar',
                    striped: true, // 设置为true会有隔行变色效果
                    dataType: "json", // 服务器返回的数据类型
                    pagination: true, // 设置为true会在底部显示分页条
                    singleSelect: false, // 设置为true将禁止多选
                    // //发送到服务器的数据编码类型
                    pageSize: 10, // 如果设置了分页，每页数据条数
                    pageNumber: 1, // 如果设置了分布，首页页码
                    showColumns: false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                    queryParams: function (params) {
                        return {
                            //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit: params.limit,
                            offset: params.offset,
                            pid: $('#pid').val()

                            // name:$('#searchName').val(),
                            // username:$('#searchName').val()
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns: [
                        {
                            field: 'rid',
                            title: '序号',
                            align: 'center',
                            formatter: function (value, row, index) {
                                var pageSize = $('#exampleTable').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                                var pageNumber = $('#exampleTable').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                                return pageSize * (pageNumber - 1) + index + 1;    //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                            }
                        },
                        // {
                        //     field: 'wid',
                        //     title: '工作日id'
                        // },
                        {
                            field: 'did',
                            title: '医生姓名',
                            formatter: function (value, row, index) {
                                return getUsernameById(row.did);
                            }
                        },
                        {
                            field: 'visitdate',
                            title: '就诊日期'
                        },
                        // {
                        //     field: 'visitnoon',
                        //     title: '就诊上午或下午'
                        // },
                        {
                            field: 'visittime',
                            title: '就诊时间'
                        },
                        {
                            field: 'serialnumber',
                            title: '就诊序号'
                        },
                        {
                            field: 'state',
                            title: '预约状态'
                        },
                        {
                            title: '操作',
                            field: 'id',
                            align: 'center',
                            formatter: function (value, row, index) {
                                var cancel = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="取消" onclick="cancel(\''
                                    + row.rid
                                    + '\')">取消</a> ';
                                if(row.state=='成功'){
                                    return cancel;
                                }
                                return '';
                            }
                        }]
                });
    }
    function reLoad() {
        $('#exampleTable').bootstrapTable('refresh');
    }

    function cancel(id) {
        layer.confirm('确定要取消预约吗？', {
            btn: ['确定', '取消']
        }, function () {
            $.ajax({
                url: prefix + "/update",
                type: "post",
                data: {
                    'rid': id,
                    'state':'取消'
                },
                success: function (r) {
                    if (r.code == 0) {
                        layer.msg(r.msg);
                        reLoad();
                    } else {
                        layer.msg(r.msg);
                    }
                }
            });
        })
    }

    function getUsernameById(uid) {
        var result = '';
        $.ajax({
            url: '/sys/user/list',
            type: "get",
            async:false,
            data: {
                'offset':0,
                'limit':5,
                'userId': uid
            },
            success: function (data) {
                result = data.rows[0].name;
            }
        });
        return result;
    }

</script>
</body>
</html>